<template>
  <div class="about">
    <van-nav-bar
      title="商品列表"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-card v-for="(item,index) in list" :key="index"
      :num="item.goods_number"
      :price="item.goods_price"
      :title="item.goods_name"
      :thumb="item.goods_big_logo"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    let id = this.$route.params.id;
    console.log(id);
    // this.$axios
    //   .get(
    //     `https://api-hmugo-web.itheima.net/api/public/v1/goods/search?cid=${id}`
    //   )
    //   .then((res) => {
    //     // console.log(res);
    //     this.list = res.data.message.goods;
    //   });
    
    // console.log(location.host);
    this.$axios.get('list.json').then(res => {
      // console.log(res);
      this.list = res.data.message.goods.filter(item => item.cat_id == id);
    })
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss">
.van-nav-bar {
  background: red;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
}
</style>
